<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>商品管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>

    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
        .img-delete:before {
            position: absolute;
            top: -5px;
            color: red;
            margin-left: -15px;
            z-index: 999;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">{{pointsTitle}}</h1>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="line-height: 36px;">基本信息</span>
                    </div>
                    <el-form ref="pointsForm1" :model="pointsForm" :rules="pointsFormRules" label-width="80px">
                        <el-form-item label="商品名" prop="name">
                            <el-input v-model="pointsForm.name" style="width:200px;" :disabled="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="标题">
                            <el-input v-model="pointsForm.title" style="width:200px;" :disabled="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="描述" prop="desc">
                            <el-input type="textarea" v-model="pointsForm.desc" style="width:400px;" :disabled="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="缩略图" prop="thumbnail" v-loading="imgLoading">
                            <el-row>
                                <img height="100" v-if="pointsForm.thumbnail !== ''" :src="qiniuUrl + pointsForm.thumbnail">
                                <i class="el-icon-circle-close img-delete" v-if="pointsForm.thumbnail !== ''" @click="deleteImg">
                                </i>
                                <el-upload
                                        v-if="!readonly"
                                        :before-upload="beforeUpload"
                                        style="display: inline-block"
                                        :show-file-list="false"
                                        action="/file/upload"
                                        :on-success="uploadSuccess">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-row>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card class="box-card" style="margin-top: 10px">
                    <div slot="header" class="clearfix">
                        <span style="line-height: 36px;">商品信息</span>
                    </div>
                    <yiqi-select-item ref="selectItem" :item-common-dialog="selectItemDialog" :limit-num="1" :check-list="tableData" :checked-ids="checkedIds" :save-callback="saveCallback" :cancel-callback="cancelCallback"></yiqi-select-item>
                    <el-form  ref="pointsForm2" :model="pointsForm" :rules="pointsFormRules" label-width="100px" >
                        <el-form-item label="商品" prop="refItemId">
                            <el-input v-model="refItemName" style="width:200px;" disabled></el-input>
                            <el-button type="primary" @click.native.prevent="selectItemDialog = true" :disabled="readonly">选择商品</el-button>
                        </el-form-item>
                        <el-form-item label="原价" prop="initialPrice">
                            <el-input v-model.number="pointsForm.initialPrice" min="0" style="width:200px;" disabled></el-input>&nbsp;元
                        </el-form-item>
                        <el-form-item label="现价" prop="salePrice">
                            <el-input v-model.number="pointsForm.salePrice" style="width:200px;" disabled></el-input>&nbsp;元
                        </el-form-item>
                        <el-form-item label="积分兑换数" prop="pointPrice">
                            <el-input v-model.number="pointsForm.pointPrice" style="width:200px;" :disabled="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" prop="stock">
                            <el-input v-model.number="pointsForm.stock" style="width:200px;" :disabled="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="单人限购" prop="limitNumber">
                            <el-input v-model.number="pointsForm.limitNumber" style="width:200px;" :disabled="readonly"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
                <div style="margin-top: 10px;text-align: center" v-if="!readonly">
                    <el-button type="primary" @click.native.prevent="save">保存</el-button>
                    <el-button @click.native.prevent="cancel">取消</el-button>
                </div>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>
<script src="/static/js/api.js"></script>
<!-- 引入共通js -->
<script src="/static/js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                user: ${(user)!'null'},
                pointsFormRules: {
                    name: [
                        {required: true, message: "商品名称不能为空"}
                    ],
                    desc: [
                        {required: true, message: "商品描述不能为空"}
                    ],
                    thumbnail: [
                        {required: true, message: "请上传图片"}
                    ],
                    refItemId: [
                        {required: true, message: "请选择商品"}
                    ],
                    initialPrice: [
                        {required: true, message: "请输入原价"},
                        {type: "number", message: '原价必须为数字'}
                    ],
                    salePrice: [
                        {required: true, message: "请输入现价"},
                        {type: "number", message: '现价必须为数字'}
                    ],
                    pointPrice: [
                        {required: true, message: "请输入积分兑换数"},
                        {type: "number", message: '积分兑换数必须为数字'}
                    ],
                    stock: [
                        {required: true, message: "请输入数量"},
                        {type: "number", message: '数量必须为数字'}
                    ],
                    limitNumber: [
                        {required: true, message: "请输入单人限购数量"},
                        {type: "number", message: '单人限购数量必须为数字'}
                    ]
                },
                imgLoading: false,
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                qiniuUrl: list.qiniuUrl,
                selectItemDialog: false,
                leftMenuList: list.menu,
                pointsTitle: '添加积分商品',
                pointsForm: {
                    thumbnail: '',
                    name: '',
                    refItemId: '',
                    desc: '',
                    title: '',
                    initialPrice: '',
                    salePrice: '',
                    pointPrice: '',
                    stock: '',
                    limitNumber: ''
                },
                detail: ${detail},
                readonly: ${readonly},
                checkedIds: [],
                tableData: [],
                refItemName: '',
                imgType: ''
            }
        },
        mounted: function () {
            if (this.detail !== false) {
                let detail = this.detail;
                this.pointsForm = {
                    id: detail.id !== undefined ? detail.id : "",
                    thumbnail: detail.thumbnail !== undefined ? detail.thumbnail : "",
                    name: detail.name !== undefined ? detail.name : "",
                    refItemId: detail.refItemId  !== undefined ? detail.refItemId : "",
                    desc: detail.desc  !== undefined ? detail.desc : "",
                    title: detail.title  !== undefined ? detail.title : "",
                    initialPrice: detail.initialPrice  !== undefined ? detail.initialPrice : "",
                    salePrice: detail.salePrice  !== undefined ? detail.salePrice : "",
                    pointPrice: detail.pointPrice !== undefined ? detail.pointPrice : "",
                    stock: detail.stock !== undefined ? detail.stock : "",
                    limitNumber: detail.limitNumber !== undefined ? detail.limitNumber : ""
                }
                this.refItemName = detail.refItemName !== undefined ? detail.refItemName : "";
                if (detail.refItemId !== undefined) {
                    this.checkedIds.push(detail.refItemId);
                    let obj = {
                        id: detail.refItemId,
                        name: detail.refItemName,
                        orgName: detail.orgName
                    }
                    this.tableData.push(obj);
                }
                if (this.readonly) {
                    this.pointsTitle = "积分商品详情";
                } else {
                    this.pointsTitle = "编辑积分商品";
                }
            } else {
                this.pointsForm = {
                    thumbnail: '',
                    name: '',
                    refItemId: '',
                    desc: '',
                    title: '',
                    initialPrice: '',
                    salePrice: '',
                    pointPrice: '',
                    stock: '',
                    limitNumber: ''
                }
                this.checkedIds = [];
                this.tableData = [];
                this.refItemName = '';
                this.pointsTitle = "添加积分商品";
            }
        },
        methods: {
            beforeUpload (file) {
                if (file.type === "image/png") {
                    this.imgType = ".png";
                    this.imgLoading = true;
                    return true;
                } else if (file.type === "image/jpeg") {
                    this.imgType = ".jpg";
                    this.imgLoading = true;
                    return true;
                } else {
                    this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
                    return false;
                }
            },
            uploadSuccess (response, file) {
                if (response.status === 100) {
                    this.pointsForm.thumbnail = response.returnValue[0].id + this.imgType;
                    this.imgLoading = false;
                } else {
                    this.imgLoading = false;
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            deleteImg () {
                this.pointsForm.thumbnail = "";
            },
            saveCallback () {
                this.checkedIds = this.$refs.selectItem.checked;
                this.tableData = this.$refs.selectItem.checkedData;
                if (this.tableData.length !== 0) {
                    this.refItemName = this.tableData[0].name;
                    this.pointsForm.refItemId = this.tableData[0].id;
                    this.pointsForm.initialPrice = this.tableData[0].initialPrice !== undefined ? this.tableData[0].initialPrice : 0;
                    this.pointsForm.salePrice = this.tableData[0].salePrice !== undefined ? this.tableData[0].salePrice : "";
                } else {
                    this.refItemName = "";
                    this.pointsForm.refItemId = "";
                    this.pointsForm.initialPrice = "";
                    this.pointsForm.salePrice = "";
                }
                this.selectItemDialog = false;
            },
            cancelCallback () {
                this.selectItemDialog = false;
            },
            cancel () {
                window.location.href = "/item/index";
            },
            save () {
                let that = this;
                let isValid1 = true;
                this.$refs.pointsForm1.validate(function (valid) {
                    if (!valid) {
                        isValid1 = false
                    }
                })
                let isValid2 = true;
                this.$refs.pointsForm2.validate(function (valid) {
                    if (!valid) {
                        isValid2 = false;
                    }
                })
                if (isValid1 && isValid2) {
                    let loading = this.$loading({fullscreen: true, lock: true});
                    if (this.pointsForm.id !== undefined) {
                        this.http("/item/update", this.pointsForm, function (res) {
                            if (res.status === 200) {
                                loading.close();
                                window.location.href = "/item/index";
                            } else {
                                loading.close();
                                that.$alert('服务器错误','提示',{
                                    confirmButtonText:'确定',
                                })
                            }
                        }, function (res) {
                            loading.close();
                            that.$alert('服务器错误','提示',{
                                confirmButtonText:'确定',
                            })
                        })
                    } else {
                        this.http("/item/point/insert", this.pointsForm, function (res) {
                            if (res.status === 200) {
                                loading.close();
                                window.location.href = "/item/index";
                            } else {
                                loading.close();
                                that.$alert('服务器错误','提示',{
                                    confirmButtonText:'确定',
                                })
                            }
                        }, function (res) {
                            loading.close();
                            that.$alert('服务器错误','提示',{
                                confirmButtonText:'确定',
                            })
                        })
                    }
                } else {
                    this.$message.error('请完善信息');
                }
            }
        }

    })
</script>

<!-- 20170105 --></body>
</html>